scripty2

namespace Element

Description

A collection of shortcut methods that are added to all DOM elements.

Methods

Instance methods

  • appear #

    Element#appear([, options]) -> element
Element.appear(element[, options]) -> element

    Make an element appear by fading it in from 0% opacity.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • cloneWithoutIDs #

    Element#cloneWithoutIDs() -> element
Element.cloneWithoutIDs(element) -> element

    Returns a clone of the element with all id attributed removed.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • fade #

    Element#fade([, options]) -> element
Element.fade(element[, options]) -> element

    Fade out an element from its current opacity setting (or 100%).

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • morph #

    Element#morph(style[, options]) -> element
Element.morph(element, style[, options]) -> element

    Dynamically adjust an element's CSS styles to the CSS properties given in the style argument.

    This method is the preferred way to invoke CSS-based effects:

    $('element_id').morph('width:500px');
$('element_id').morph('width:500px', 'slow');
$('element_id').morph('width:500px', function(){ alert('finished!'); });
$('element_id').morph('width:500px', 2); // duration 2 seconds

    Complex options can be specified with an Object literal:

    $('element_id').morph('width:500px;height:500px', {
  duration: 4,
  transition: 'linear',
  delay: .5,
  propertyTransitions: {
    width: 'mirror', height: 'easeInOutCirc'
  },
  after: function(){ alert('finished');  }
});

    Morphs can be chained:

    // the height morph will be executed immediately following
// the width morph
$('element_id').morph('width:500px').morph('height:500px');

    By default, morph will create a new S2.FX.Queue for the element if there isn't one already, and use this queue for queueing up chained morphs. To prevent a morph from queuing at the end, use the position: 'parallel' option.

    // the height morph will be executed at the same time as the width morph
$('element_id').morph('width:500px').morph('height:500px', { position: 'parallel' });

    See also S2.FX.Morph.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • scrollTo #

    Element#scrollTo([, to[, options]]) -> element
Element.scrollTo(element[, to[, options]]) -> element
    • to (Number) – vertical scroll position in pixels
    • options (Object) – effect options

    This method augments Prototype's Element.scrollTo method.

    With just the @element parameter given, it will revert to Prototype's default implementation: the viewport will be scrolled (without animation) to contain the element.

    If given the to parameter, the elements contents will be smoothly scrolled to the specified scrollTop position.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • transform #

    Element#transform(transforms) -> element
Element.transform(element, transforms) -> element
    • transforms (Object) – rotation angle and scale factor

    Rotate and scale an element. transforms is an object containing:

    • rotation: Rotation angle in radians
    • scale: Scale factor

    Example:

    // rotate by 1.5 radians, scale by 200%
$('element_id').transform({ rotation: 1.5, scale: 2 });

    [[manipulate:update]] event memos can be directly fed into Element#transform:

    $('element_id').observe('manipulate:update', function(event){
   $('element_id').transform(event.memo);
});

    To convert degrees to radians, use:

    radians = degrees * (Math.PI/180);

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

Class methods

  • effect #

    Element.effect(@element, effect[, options]) -> element

    Initialize and play the specified effect on the element.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.

  • getStyles #

    Element.getStyles(@element) -> Object
    • element (String | Object) – DOM object or element ID

    Returns an object with all currently applied style attributes for a given DOM object. This includes all styles from stylesheets, properties set with style attributes and CSS properties set with the DOM API.

    This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.